<template>
  <div id="sliderbar" class="sliderbar">
    <div class="div-funcs">
      <dl class="dl-layers" @click="showIndex = 0">
        <dd />
        <dt>专题图层</dt>
      </dl>
      <dl class="dl-poi dem" @click="showIndex = 4">
        <dd />
        <dt>任务</dt>
      </dl>
      <!-- <dl class="dl-subject image" @click="showIndex = 1">
        <dd />
        <dt>专题展示</dt>
      </dl>-->
      <dl class="dl-bookmark dem" @click="showIndex = 2">
        <dd />
        <dt>书签</dt>
      </dl>

      <dl class="dl-poi dem" @click="showIndex = 3">
        <dd />
        <dt>地名查询</dt>
      </dl>
    </div>
    <div v-show="showIndex != -1" class="div-funcpanel animated fadeInLeft">
      <div style="height:25px;">
        <i
          type="text"
          class="mapModulePanelClose el-icon-close"
          style="float: right;"
          @click="showIndex = -1"
        />
      </div>
      <el-divider />
      <!-- 专题图层 -->
      <div v-show="showIndex == 0" style="height: 100%;position:relative;">
        <layerTree
           ref="layerTree"
          :layers="mapTree"
          :is-layer="isLayer"
          :is-query="isQuery"
          :is-echart="isEchart"
          :is-legend="isLegend"
          :is-slider="isSlider"
          @onNodeChecked="onNodeChecked"
          @onChange="onChange"
          @onLegendShow="onLegend"
          @onEchart="onEchart"
          @onQuery="onQuery"
          @onLocateTo="onLocateTo"
        />
      </div>

      <!-- 专题展示 -->

      <div v-show="showIndex == 1" style="height: 100%;position:relative;">aaa</div>
      <!-- 书签 -->

      <div v-show="showIndex == 2" style="height: 100%;position:relative;">
        <book-mark />
      </div>
      <!-- 地名地址 -->
      <div v-show="showIndex == 3" style="height: 100%;position:relative;">
        <POI />
      </div>

      <!-- 任务 -->
      <div v-show="showIndex == 4" style="height: 100%;position:relative;">
        <PlotSymbol />
      </div>
    </div>
  </div>
</template>

<script>
import BookMark from "@/pages/xcgl/components/bookmark"; // 书签列表
import POI from "@/pages/xcgl/components/poi";
import LayerTree from "@/components/layerTree";
import TaskList from "@/pages/xcgl/components/taskList";
import PlotSymbol from "@/pages/xcgl/components/plotSymbol";
import { mapGetters, mapState } from "vuex";
export default {
  name: "SliderBar",
  components: {
    BookMark,
    POI,
    LayerTree,
    TaskList,
    PlotSymbol
  },
  data() {
    return {
      showdrawer: false,
      showIndex: -1,
      search: ""
    };
  },
  methods: {
    // 图层定位
    onLocateTo(data) {
      this.mapService.setMapBoundsByLayerBounds(data);
    },
    // 查询事件
    onQuery(data) {
      this.$store.commit("xcgl/setCurrentSearchLayer", data);
      this.$store.commit("xcgl/setIsShowAttribute", true);
    },
    // 统计事件
    onEchart(data) {},
    // 图例事件
    onLegend(data) {
      this.$store.commit("xcgl/setCurrentSearchLayer", data);
      this.$store.commit("xcgl/setShowLayerLegend", true);
    },
    // 图例
    isLegend(node, data) {
      return data.legendurl;
    },
    // 透明的
    isSlider(node, data) {
      return data.attribute == "" && data.isVisible;
    },
    // Echart图标
    isEchart(node, data) {
      return false && data.isVisible;
    },
    // 查询
    isQuery(node, data) {
      return data.attribute != "" && data.isVisible;
    },
    // 图层
    isLayer(node, data) {
      return data.url;
    },

    // 透明事件
    onChange($event, data) {
      this.mapServiceLeft.setOpacityValue(1 - $event / 100, data);
      this.mapServiceRight.setOpacityValue(1 - $event / 100, data);
    },

    // 图层选中
    onNodeChecked(node, data) {
      this.lookForLayers([data], node);
    },

    // 查找图层
    async lookForLayers(layers, node) {
      for (let i = 0; i < layers.length; i++) {
        var item = layers[i];
        if (item.children && item.children.length > 0) {
          await this.lookForLayers(item.children, node);
        } else {
          await this.openOrCloseLayer(item, node);
        }
      }
    },

    // 打开图层
    openOrCloseLayer(layer, node) {
      var visible = node.checkedKeys ? node.checkedKeys.indexOf(layer._id) != -1 : true;
      this.$set(layer, "isVisible", visible);
      this.mapServiceLeft.setLayerVisible(visible, layer, undefined);
      this.mapServiceRight.setLayerVisible(visible, layer, undefined);
    },

    //地图切换
    onBaseLayerChanged(ids) {
      this.$refs["layerTree"].setCheckedLayers(ids);
    }
  },
  mounted() {
    this.bus.$on("onBaseLayerChanged", this.onBaseLayerChanged);
  },
  beforeDestroy() {
    this.bus.$off("onBaseLayerChanged", this.onBaseLayerChanged);
  },
  computed: {
    ...mapGetters("user", ["mapTree"]),
    ...mapState({
      mapServiceLeft(state) {
        return state.xcgl.mapServiceLeft;
      },
      mapServiceRight(state) {
        return state.xcgl.mapServiceRight;
      }
    })
  }
};
</script>

<style scoped>
.sliderbar {
  position: absolute;
  height: 100%;
  width: 88px;
  background-color: #063350;
  left: 0;
  top: 0;
  z-index: 999;
}

.div-funcs {
  width: 88px;
  text-align: center;
  padding-top: 60px;
}

.div-funcs dl {
  margin: 40px 0;
  color: #ccc;
}

.div-funcs dl:hover {
  cursor: pointer;
  color: #fff;
}

.div-funcs dd {
  width: 50px;
  height: 50px;
  margin: 6px auto;
}

.dl-layers dd {
  background: url(../../../../assets/img/yzt/subjectLayer.png);
}

.dl-subject dd {
  background: url(../../../../assets/img/yzt/subjectShow.png);
}

.dl-bookmark dd {
  background: url(../../../../assets/img/yzt/bookmark.png);
}

.dl-poi dd {
  background: url(../../../../assets/img/yzt/poi.png);
}

.div-funcpanel {
  position: absolute;
  top: 0;
  left: 88px;
  height: 100%;
  width: 340px;
  background-color: #063350;
  border-left: 1px solid #bbb;
}

.mapModulePanelClose {
  position: absolute;
  right: 3px;
  top: 3px;
  font-size: 16px;
  transition: transform 0.3s;
  /* background-color: #f44336; */
  border-radius: 10px;
  color: #fff;
  padding: 2px;
  cursor: pointer;
}
</style>
